<?php
$this->addCssFile([
    'css/wechat_menu.css',
    'css/wechat_menu_tools.css',
    ])
?>
<div class="card-box" id="mz_editBox">
    <div class="menu_setting_area">

        <div class="menu_preview_area">
            <div class="mobile_menu_preview">
                <div class="mobile_hd tc">慕梓生活圈</div>
                <div class="mobile_bd">
                    <form id="menuForm">
                    <input type="hidden" name="<?= Yii::$app->request->csrfParam?>" value="<?=Yii::$app->request->csrfToken?>">
                    <input type="hidden" name="appId"  value="<?= $appId;?>" >
                    <ul class="pre_menu_list grid_line ui-sortable ui-sortable-disabled">
                        <li v-for="(menu,index) in button" v-on:click="setCurrent(menu,button)" class="pre_menu_item grid_item size1of3" v-bind:class="{'current':editData.id == menu.id}">
                            <input type="hidden" :name="'button['+menu.id+'][id]'" v-model="menu.id" >
                            <input type="hidden" :name="'button['+menu.id+'][name]'" v-model="menu.name"/>
                            <input v-if="menu.type =='view'" type="hidden" :name="'button['+menu.id+'][url]'" v-model="menu.url"/>
                            <input v-if="menu.type =='click'" type="hidden" :name="'button['+menu.id+'][key]'" v-model="menu.key"/>
                            <input type="hidden" :name="'button['+menu.id+'][type]'" v-model="menu.type"/>


                            <a href="javascript:void(0);" class="pre_menu_link" draggable="false">
                                <i class="icon_menu_dot js_icon_menu_dot" v-show="menu.sub_button && menu.sub_button.length>0"></i>
                                <i class="icon20_common sort_gray"></i>
                                <span class="js_l1Title" v-text="menu.name"></span>
                            </a>
                            <div class="sub_pre_menu_box" v-show="(isSorting && menu.sub_button && menu.sub_button.length>0) || (!isSorting && (editData.id == menu.id || editData.pid == menu.id))">
                                <ul class="sub_pre_menu_list">
                                    <li v-for="sub in menu.sub_button" v-on:click.stop="setCurrent(sub,menu)" v-bind:class="{'current':editData.id == sub.id}">
                                        <input type="hidden" :name="'button['+menu.id+'][sub_button]['+sub.id+'][id]'"  v-model="sub.id" >
                                        <input type="hidden" :name="'button['+menu.id+'][sub_button]['+sub.id+'][name]'" v-model="sub.name"/>
                                        <input type="hidden" :name="'button['+menu.id+'][sub_button]['+sub.id+'][type]'" v-model="sub.type"/>
                                        <input v-if="sub.type=='view'" type="hidden" :name="'button['+menu.id+'][sub_button]['+sub.id+'][url]'" v-model="sub.url"/>
                                        <input v-if="sub.type=='click'" type="hidden" :name="'button['+menu.id+'][sub_button]['+sub.id+'][key]'" v-model="sub.key"/>

                                        <a href="javascript:void(0);" draggable="false">
                                            <span class="sub_pre_menu_inner">
                                                <i class="icon20_common sort_gray"></i>
                                                <span v-text="sub.name"></span>
                                            </span>
                                        </a>
                                    </li>
                                    <li v-show="!isSorting && (!menu.sub_button || menu.sub_button.length<5)">
                                        <a href="javascript:void(0);" v-on:click="addSub(menu)" title="最多添加5个子菜单" draggable="false">
                                            <span class="sub_pre_menu_inner js_sub_pre_menu_inner">
                                              <i class="icon14_menu_add"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                                <i class="arrow arrow_out"></i>
                                <i class="arrow arrow_in"></i>
                            </div>
                        </li>

                        <li class="js_addMenuBox pre_menu_item grid_item no_extra" v-show="!isSorting && button.length<=3">
                            <a v-on:click="add()" href="javascript:void(0);" class="pre_menu_link" title="最多添加3个一级菜单" draggable="false">
                                <i class="icon14_menu_add"></i>
                            </a>
                        </li>
                    </ul>
                    </form>
                </div>
            </div>
    <!--        <div class="sort_btn_wrp">-->
    <!--            <a id="orderBt" class="btn btn_default" href="javascript:void(0);" style="display: inline-block;">菜单排序</a>-->
    <!--            <span id="orderDis" class="dn btn btn_disabled" style="display: none;">菜单排序</span>-->
    <!--            <a id="finishBt" href="javascript:void(0);" class="dn btn btn_default">完成</a></div>-->
        </div>
        <div class="menu_form_area">
            <div class="menu_initial_tips tips_global" v-show="!editData.id && !isSorting">点击左侧菜单进行编辑操作</div>
            <div class="menu_initial_tips tips_global" v-show="isSorting">拖动左侧菜单进行排序</div>

            <div v-show="editData.id && !isSorting" class="portable_editor to_left">
                <div class="editor_inner">
                    <div class="global_mod float_layout menu_form_hd js_second_title_bar">
                        <span class="global_info" v-text="editData.name"></span>
                        <div class="global_extra">
                            <a href="javascript:void(0);" v-on:click="remove(parent,editData)">删除{{(editData.pid?"子":"")}}菜单</a>
                        </div>
                    </div>
                    <div class="menu_form_bd" id="view">
                        <div id="js_innerNone" style="display:none;" class="msg_sender_tips tips_global"></div>
                        <div class="frm_control_group js_setNameBox">
                            <label for="" class="frm_label">
                                <strong class="title js_menuTitle">{{(editData.pid?"子":"")}}菜单名称</strong>
                            </label>
                            <div class="frm_controls">
                                <span class="frm_input_box with_counter counter_in append">
                                    <input v-on:blur="setMenuName()" v-on:keyup="checkMenuName()" type="text" v-model="menuName" type="text" class="frm_input js_menu_name">
                                </span>
                                <p v-bind:style="{'display':nameOutRange?'block':'none'}" class="frm_msg fail">字数超过上限</p>
                                <p v-bind:style="{'display':menuName == ''?'block':'none'}" class="frm_msg fail">请输入{{(editData.pid?"子":"")}}菜单名称</p>
                                <p class="frm_tips">{{(editData.pid?"字数不超过8个汉字或16个字母":"字数不超过4个汉字或8个字母")}}</p>
                            </div>
                        </div>
                        <div class="frm_control_group" v-show="editData.type != 'none'">
                            <label for="" class="frm_label">
                                <strong class="title js_menuContent">{{(editData.pid?"子":"")}}菜单内容</strong>
                            </label>
                            <div class="frm_controls frm_vertical_pt">
                                <div class="radio radio-success frm_radio_label js_radio_sendMsg" v-on:click="setType('view')">
                                    <input type="radio" name="type" id="sendMsg" :checked="editData.type=='view'">
                                    <label for="sendMsg" class="lbl_content">
                                        发送消息
                                    </label>
                                </div>
                                <div class="radio radio-success frm_radio_label js_radio_sendMsg">
                                    <input type="radio" name="type" id="skipPage" :checked="editData.type=='click'" v-on:click="setType('click')">
                                    <label for="skipPage" class="lbl_content">
                                        跳转网页
                                    </label>
                                </div>
                                <div class="radio radio-success frm_radio_label js_radio_sendMsg">
                                    <input type="radio" name="type" id="smallProgram" v-on:click="setType('program')">
                                    <label for="smallProgram" class="lbl_content":checked="editData.type=='program'">
                                        跳转小程序
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="menu_content_container">
                            <div class="menu_content send jsMain" v-show="editData.type == 'view'">
                                <div class="msg_sender">
                                    <div class="msg_tab">
                                        <div class="tab_navs_panel">
                                            <ul class="tab_navs">
                                                <li class="tab_nav tab_appmsg width4 selected" data-type="10" data-tab=".js_appmsgArea" data-tooltip="图文消息"> <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="icon_msg_sender"></i><span class="msg_tab_title">图文消息</span></a> </li>
                                                <li class="tab_nav tab_img width4" data-type="2" data-tab=".js_imgArea" data-tooltip="图片"> <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="icon_msg_sender"></i><span class="msg_tab_title">图片</span></a> </li>
                                                <li class="tab_nav tab_audio width4" data-type="3" data-tab=".js_audioArea" data-tooltip="语音"> <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="icon_msg_sender"></i><span class="msg_tab_title">语音</span></a> </li>
                                                <li class="tab_nav tab_video width4 no_extra" data-type="15" data-tab=".js_videoArea" data-tooltip="视频"> <a href="javascript:void(0);" onclick="return false;">&nbsp;<i class="icon_msg_sender"></i><span class="msg_tab_title">视频</span></a> </li>
                                            </ul>
                                        </div>
                                        <div class="tab_panel">
                                            <div class="tab_content">
                                                <div class="js_appmsgArea inner ">
                                                    <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                                                    <div class="tab_cont_cover jsMsgSendTab" data-index="0">
                                                        <div class="media_cover">
                                                            <span class="create_access">
                                                                <a class="add_gray_wrp jsMsgSenderPopBt" href="javascript:;" data-type="10" data-index="0">
                                                                    <i class="icon36_common add_gray"></i> <strong>从素材库中选择</strong>
                                                                </a>
                                                            </span>
                                                        </div>
                                                        <div class="media_cover">
                                                            <span class="create_access">
                                                                <a target="_blank" class="add_gray_wrp create_new_appmsg" href="javascript:;">
                                                                    <i class="icon36_common add_gray"></i> <strong>新建图文消息</strong>
                                                                </a>

                                                                <a target="_blank" href="#" style="display: none;">
                                                                    <i class="icon_appmsg_selfcreate"></i><strong>自建图文</strong>
                                                                </a>
                                                                <a target="_blank" href="#" style="display: none;">
                                                                    <i class="icon_appmsg_share"></i><strong>分享图文</strong>
                                                                </a>
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab_content" style="display: none;">
                                                <div class="js_imgArea inner ">
                                                    <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                                                    <div class="tab_cont_cover jsMsgSendTab" data-index="1" data-type="2">
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a class="add_gray_wrp jsMsgSenderPopBt" href="javascript:;" data-type="2" data-index="1"> <i class="icon36_common add_gray"></i> <strong>从素材库中选择</strong> </a> </span>
                                                        </div>
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a class="add_gray_wrp" id="msgSendImgUploadBt" data-type="2" href="javascript:;"> <i class="icon36_common add_gray"></i> <strong>上传图片</strong> </a> </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab_content" style="display: none;">
                                                <div class="js_audioArea inner ">
                                                    <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                                                    <div class="tab_cont_cover jsMsgSendTab" data-index="2" data-type="3">
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a class="add_gray_wrp jsMsgSenderPopBt" href="javascript:;" data-type="3" data-index="2"> <i class="icon36_common add_gray"></i> <strong>从素材库中选择</strong> </a> </span>
                                                        </div>
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a class="add_gray_wrp " id="msgSendAudioUploadBt" href="javascript:;"> <i class="icon36_common add_gray"></i> <strong>新建语音</strong> </a> </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="tab_content" style="display: none;">
                                                <div class="js_videoArea inner ">
                                                    <!--type 10图文 2图片  3语音 15视频 11商品消息-->
                                                    <div class="tab_cont_cover jsMsgSendTab" data-index="3">
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a class="add_gray_wrp jsMsgSenderPopBt" href="javascript:;" data-type="15" data-index="3"> <i class="icon36_common add_gray"></i> <strong>从素材库中选择</strong> </a> </span>
                                                        </div>
                                                        <div class="media_cover">
                                                            <span class="create_access"> <a target="_blank" class="add_gray_wrp" href="/cgi-bin/appmsg?t=media/videomsg_edit&amp;action=video_edit&amp;type=15&amp;lang=zh_CN&amp;token=167507497"> <i class="icon36_common add_gray"></i> <strong>新建视频</strong> </a> </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <p class="profile_link_msg_global menu_send mini_tips warn dn js_warn" style="display: none;"> 请勿添加其他公众号的主页链接 </p>
                            </div>

                            <div class="menu_content url jsMain" v-show="editData.type == 'click'">
                                <form action="" id="urlForm" onsubmit="return false;">
                                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下链接</p>
                                    <div class="frm_control_group">
                                        <label for="" class="frm_label">页面地址</label>
                                        <div class="frm_controls">
                                            <span class="frm_input_box disabled">
                                                <input type="text" class="frm_input" id="urlText" name="urlText" disabled="disabled">
                                            </span>
                                            <p class="profile_link_msg_global menu_url mini_tips warn dn js_warn">请勿添加其他公众号的主页链接</p>
                                            <p class="frm_tips" id="js_urlTitle" style="display: none;">来自
                                                <span class="js_name"></span>
                                                <span style="display:none;">-《
                                                    <span class="js_title"></span>》
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="frm_control_group btn_appmsg_wrap">
                                        <div class="frm_controls">
                                            <p class="frm_msg fail dn" id="urlUnSelect" style="display: none;">
                                                <span for="urlText" class="frm_msg_content" style="display: inline;">请选择一篇文章</span></p>
                                            <a href="javascript:;" id="js_appmsgPop">从公众号图文消息中选择</a>
                                            <a href="javascript:void(0);" class="dn btn btn_default" id="js_reChangeAppmsg" style="display: block;">重新选择</a></div>
                                    </div>
                                </form>
                            </div>
                            <!--选择小程序-->
                            <div class="menu_content weapp" v-show="editData.type == 'program'">
                                <div class="link_weapp_loading js_link_weapp_loading" style="display: none;">
                                    <i class="icon_loading_small white"></i>
                                </div>
                                <div class="weapp_empty_box js_weapp_no_binded_hint" style="display: none;">
                                    <p class="desc">自定义菜单可跳转已绑定的小程序，本公众号尚未绑定小程序。</p>
                                    <a href="" class="btn btn_default">前往绑定</a>
                                </div>
                                <form action="" id="weappSettingsForm" onsubmit="return false;">
                                    <p class="menu_content_tips tips_global">订阅者点击该子菜单会跳到以下小程序</p>
                                    <div class="frm_control_group js_weapp_select_group">
                                        <label for="" class="frm_label">小程序</label>
                                        <div class="frm_controls">
                                            <a href="" class="btn btn_default js_weapp_select">选择小程序</a></div>
                                        <input type="hidden" class="js_weapp_appid" id="" name="">
                                    </div>
                                    <div class="frm_control_group js_weapp_path_group">
                                        <label for="" class="frm_label">小程序路径
                                            <span class="js_weapp_type4">(选填)</span></label>
                                        <div class="frm_controls">
                                            <span class="frm_input_box">
                                              <input type="text" class="frm_input js_weapp_path" id="" name="">
                                              <input type="hidden" class="js_weapp_service_type">
                                            </span>
                                            <p class="frm_tips js_weapp_type4" style="display: none;">小程序可按“？参数”格式填入参数或不填写此信息</p>
                                            <p class="frm_tips">已选择小程序 -
                                                <span class="js_weapp_title"></span></p>
                                            <a href="" class="btn btn_default js_weapp_select">重新选择</a>
                                        </div>
                                    </div>
                                    <div class="frm_control_group">
                                        <label for="" class="frm_label">备用网页</label>
                                        <div class="frm_controls js_weapp_backup_url_input_wrapper">
                                            <span class="frm_input_box js_weapp_backup_url_input">
                                              <input type="text" class="frm_input js_weapp_backup_url" id="" name="">
                                            </span>
                                            <div class="js_weapp_backup_url_select" style="display: none">
                                                <p>
                                                    <a href="javascript:;" id="js_weapp_appmsgPop">从公众号图文消息中选择</a></p>
                                                <p class="frm_tips js_weapp_url_title" style="display: none;">来自
                                                    <span class="js_name"></span>
                                                    <span style="display:none;">-《
                                                    <span class="js_title"></span>》</span>
                                                </p>
                                                <a href="javascript:void(0);" class="dn btn btn_default" id="js_weapp_reChangeAppmsg">重新选择</a>
                                            </div>
                                            <p class="profile_link_msg_global mini_tips warn dn js_warn"></p>
                                            <p class="frm_tips" id="" style="">旧版微信客户端无法支持小程序，用户点击菜单时将会打开备用网页。</p>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <span class="editor_arrow_wrp">
                    <i class="editor_arrow editor_arrow_out"></i>
                    <i class="editor_arrow editor_arrow_in"></i>
                </span>
            </div>
        </div>
    </div>
    <div class="tool_bar tc js_editBox">
        <span v-on:click="saveMenus()" class="btn btn_input btn_primary" style="display: inline-block;">
            <button class="btn-primary">保存并发布</button>
        </span>
        <a href="javascript:void(0);" class="btn btn_default" id="viewBt" style="display: inline-block;">预览</a>
    </div>
</div>

<?php $this->beginBlock('jsText', 'append'); ?>
    <script type="text/javascript">
        var vuUtil = new Vue({
            el: '#mz_editBox',
            data: {
                newid: 1,
                dict: <?php echo json_encode(array(), JSON_UNESCAPED_UNICODE); ?>,
                button: <?=json_encode($buttons,true)?>,
                editData: {},
                parent: {},
                menuName: '',
                nameOutRange: false, //字段名超长
                isSorting: false
            },
            methods: {
                setMenuName: function() {
                    if(this.menuName === ''){
                        this.editData.name = this.editData.pid?'子菜单名称':'菜单名称';
                    }else{
                        var len = 0;
                        var maxLen = this.editData.pid?16:8;
                        for(var i in this.menuName){
                            if(/[^\x00-\xff]/g.test(this.menuName[i])){
                                len += 2;
                            }else{
                                len++;
                            }
                            if (len>=maxLen) break;
                        }
                        this.editData.name = this.menuName = this.menuName.substring(0,parseInt(i)+1);
                        this.nameOutRange = false;
                    }
                },
                checkMenuName: function(){
                    var maxLen = this.editData.pid?16:8;
                    if(this.getBLen(this.menuName)>maxLen){
                        this.nameOutRange = true;
                    }else{
                        this.nameOutRange = false;
                    }
                },
                getBLen:function(str){
                    if(str === null)
                    {
                        return 0;
                    }
                    if(typeof str !== "string"){
                        str += "";
                    }

                    return str.replace(/[^\x00-\xff]/g,"01").length;
                },
                setCurrent: function(current,parent) {
                    this.editData = current;
                    this.menuName = current.name;
                    this.parent = parent;
                },
                setType:function (type) {
                  this.editData.type = type;
                },
                saveMenus: function ()
                {
                    $.ajax({
                        type: 'POST',
                        url: '<?php echo Yii::$app->urlManager->createUrl(['/wechat/menu/save']); ?>',
                        data: $("#menuForm").serialize(),
                        dataType: 'json',
                        success: function (resp)
                        {
                            if (resp.e === '0') {
                                nsalert(resp.m);
                                setTimeout(function ()
                                {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                nsalert(resp.m, "fail");
                            }
                        },
                    });
                },
                confirm: function ()
                {
                    var self = this;
                    bootbox.confirm("确定清空菜单？", function (resp)
                    {
                        if (resp) {
                            self.empty();
                        }
                    });
                },
                empty: function ()
                {
                    $.ajax({
                        type: 'POST',
                        url: '<?php echo Yii::$app->urlManager->createUrl(['/wechat/backend/menu/delete']); ?>',
                        data: {wxid: '<?php echo "18"; ?>'},
                        dataType: 'json',
                        success: function (resp)
                        {
                            if (resp.e === '0') {
                                nsalert(resp.m);
                                setTimeout(function ()
                                {
                                    window.location.reload();
                                }, 1500);
                            } else {
                                nsalert(resp.m, "fail");
                            }
                        },
                    });
                },
                addSub: function(parent) {
                    var item = {
                        "wxid": '<?php echo 18; ?>',
                        "pid": parent['id'],
                        "name": "子菜单名称",
                        "type": "view",
                        "content": "",
                        "id": 'newid' + (++this.newid)
                    };
                    var self = this;

                    if(parent['type'] !== 'none'){
                        swal({
                            title: "确定要添加吗?",
                            text: "添加子菜单会清除一级菜单内容，确定添加子菜单？",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonClass: 'btn-warning waves-effect waves-light',
                            cancelButtonText:'取消',
                            confirmButtonText: '确定'
                        },function () {
                            parent['type'] = 'none';
                            Vue.set(parent,'sub_button',[]);
                            parent['sub_button'].push(item);
                            self.editData = item;
                        });
                    }else{
                        parent['sub_button'].push(item);
                        self.editData = item;
                    }
                },
                add: function () {
                    var item = {
                        "wxid": '<?php echo 18; ?>',
                        "pid": 0,
                        "name": "菜单名称",
                        "type": "view",
                        "content": "",
                        "id": 'newid' + (++this.newid)
                    };
                    var self = this;
                    item['sub_button'] = [];
                    this.button.push(item);
                    self.editData = item;
                },
                remove: function(parent,sub) {
                    var self = this;
                    if(!sub.pid){
                        var text =  sub.type === 'none'?"删除一级菜单其下子菜单也会被删除，确定删除？":"确定删除菜单？";
                    }else{
                        var text = "确定删除子菜单？";
                    }

                    swal({
                        title: "确定要删除吗?",
                        text: text,
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: 'btn-warning waves-effect waves-light',
                        cancelButtonText:'取消',
                        confirmButtonText: '确定'
                    },function () {
                        if(!sub.pid){
                            var indexParent = parent.indexOf(sub);
                            parent.splice(indexParent, 1);
                        }else{
                            var indexChildren = parent.children.indexOf(sub);
                            parent.children.splice(indexChildren, 1);
                        }
                        self.editData = {};
                    });
                },
                setSort: function() {
                    var self = this;
                    self.isSorting = true;
                    $('#menuForm ul').sortable({
                        cancel: "#menuForm ul li:last-child"
                    }).disableSelection();
                    $(".sort_gray").css("display","inline-block");
                },
                finishSort: function() {
                    var self = this;
                    self.isSorting = false;
                    $(".sort_gray").css("display","none");
                    $('#menuForm ul').sortable('destroy');
                    function getOrdered(orderArr,btns){
                        var data = [];
                        for(var i in btns){
                            var tmp = $.extend(true,{},btns[i]);
                            var index = orderArr.indexOf(btns[i]['id'].toString());
                            if(btns[i]['sub_button']) {
                                tmp['sub_button'] = getOrdered(orderArr,btns[i]['sub_button']);
                            }
                            data[index] = tmp;
                        }
                        var ret = [];
                        for(var j in data){
                            if(data[j]){
                                ret.push(data[j]);
                            }
                        }
                        return ret;
                    }
                    var orderArr = [];
                    $('#menuForm').find('ul>li').each(function(){
                        var id = $(this).find('input:first-child').val();
                        if(id){
                            orderArr.push(id);
                        }
                    });
                    var data = getOrdered(orderArr,self.button);
                    self.button = data;
                }
            }
        });
    </script>
<?php $this->endBlock(); ?>